<%--
  Created by IntelliJ IDEA.
  User: zrw
  Date: 2019/11/28
  Time: 17:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>通话时长</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
       /* * {
            color: #909399;
            font-size: 14px;
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }*/
        /* 去除el-table底部的滚动条 */
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
        h1 {
            color: #86868b;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
        }
        .block {
            width: 680px;
            margin: 20px auto;
        }
        .block .demonstration {
            color: #86868b;
            font-size: 14px;
        }
        input.el-input__inner {
            color: #86868b;
            font-weight: 600;
        }
        .el-table .cell {
            color: #86868b;
            font-size: 14px;
            font-weight: normal;
        }

    </style>
</head>
<body>
    <h1>话务员通话时长统计</h1>
    <div id="app">
        <template>
            <div class="block">
                <span class="demonstration">选择查询时间段：</span>
                <el-date-picker
                    v-model="value1"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="getSelectValue">

                </el-date-picker>
                &nbsp;-&nbsp;
                <el-date-picker
                    v-model="value2"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="getSelectValue">

                </el-date-picker>
            </div>
            <el-table
                :data="tableData"
                border
                style="width: 680px; margin: 20px auto;">
                <el-table-column prop="id" label="排名" width="60">
                    <template slot-scope="scope">
                        <div v-html="scope.row.id" style="color: #909399;"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="cGh" label="工号" width="100">
                    <template slot-scope="scope">
                        <div v-html="scope.row.cGh" style="color: #909399;"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="cName" label="姓名" width="200">
                    <template slot-scope="scope">
                        <div v-html="scope.row.cName" style="color: #909399;"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="gName" width="200">
                    <template slot="header" slot-scope="scope">
                        <el-select v-model="value3" @change="getSelectValue()" placeholder="小组">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

                            </el-option>
                        </el-select>
                    </template>
                    <template slot-scope="scope">
                        <div v-html="scope.row.gName" style="color: #909399;"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="telHour" label="时长" width="120">
                    <template slot-scope="scope">
                        <div v-html="scope.row.telHour" style="color: #909399;"></div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="6"
                    layout="total, prev, pager, next"
                    :total="counts">

                </el-pagination>
            </div>
        </template>
    </div>
    <script>
        var Main = {
            data() {
                return {
                    value1: '${time01}',
                    value2: '${time02}',
                    tableData: [],
                    options: ${options},
                    value3: '',
                    currentPage: 1,
                    counts: 0
                }
            },
            methods: {
                getSelectValue() {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "listHour",
                        data: "starttime=" + this.value1 + "&endtime=" + this.value2 + "&groupId=" + this.value3,
                        success: function(data) {
                            _this.tableData = data;
                            _this.counts = data[0].total;
                            _this.currentPage = 1;

                        }
                    });
                },
                /*handleSizeChange(val) {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "listHour",
                        data: "starttime=" + this.value1 + "&endtime=" + this.value2 + "&groupId=" + this.value3 + "&size=" + val,
                        success: function(data) {
                            _this.tableData = data;
                        }
                    });
                },*/
                handleCurrentChange(val) {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "listHour",
                        data: "starttime=" + this.value1 + "&endtime=" + this.value2 + "&groupId=" + this.value3 + "&start=" + val,
                        success: function(data) {
                            _this.tableData = data;
                        }
                    });
                }
            }
        }
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>
</body>
</html>
